<div class="layui-bg-gray">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-panel">

                <div id="deviceStats" style="height:95%;"></div>

            </div>
        </div>
    </div>
</div>
<script src="${basePath}/js/jquery.js"></script>
<script src="${basePath}/plugins/kitadmin/layui.js"></script>
<script src="${basePath}/plugins/kitadmin/lay/kit_modules/echarts.js"></script>
<script>
    layui.use(['jquery'], function () {

        // 初始化设备状态表格
        var deviceStatsCharts = echarts.init(document.getElementById('deviceStats'));

        // 几个坐标轴的数据
        var xAxisData = []; //横轴
        var data1 = []; // 总数
        var data2 = []; // 已用
        var data3 = []; // 空闲

        $.ajax({
            async: false,
            type: "GET",
            url: "../device/getDeviceData01",
            dataType: "json",
            success: function (data) {
                for (var i = 0; i < data.length; i++) {
                    xAxisData.push(data[i].deviceNo + "\n" + data[i].deviceName);
                    data1.push(data[i].deviceSum);
                    data2.push(data[i].deviceUsed);
                    data3.push(data[i].deviceFree);
                }
            }
        });

        var emphasisStyle = {
            itemStyle: {
                shadowBlur: 10,
                shadowColor: 'rgba(0,0,0,0.3)'
            }
        };

        // 指定图表的配置项和数据
        var option = {
            // 标题
            title: {
                text: '设备总量/使用量统计', // TODO 设置图片的标题
                // 标题样式
                textStyle: {
                    color: '#333',
                    fontStyle: 'normal' // 还可以设置好多
                },
                subtext: '', // 图片的子标题
                // 子标题样式
                subtextStyle: {
                    color: '#aaa'
                },
                top: 10, // 标题距离上部距离 像素
                left: "center" // 标题距离左侧距离 可为center
            },
            // 图例栏
            legend: {
                data: ['总数(台)', '已用(台)', '空闲(台)'],
                left: "5%",
                top: 50
            },
            // 柱子颜色
            color: [
                '#2590ff',
                '#fd88ee',
                '#2dffc9'
            ],
            // brush: {
            //     toolbox: ['rect', 'polygon', 'lineX', 'lineY', 'keep', 'clear'],
            //     xAxisIndex: 0
            // },
            // 工具栏
            toolbox: {
                //工具配置项
                feature: {
                    // restore: {},
                    saveAsImage: {
                        type: 'png', // 保存类型：PNG
                        pixelRatio: 2 //保存图片的分辨率，默认与当前显示大小相同，设置其他数字x，则为当前显示大小的x倍
                    }
                },
                itemSize: 20, //图标大小
                // 工具栏位置
                top: 35,
                right: "10%"
            },
            // 提示框组件
            tooltip: {},
            // X 轴
            xAxis: {
                data: xAxisData,
                name: '设备名',
                axisLine: {onZero: true},
                splitLine: {show: false},
                splitArea: {show: false},
                nameTextStyle: {
                    fontSize: 14
                },
                axisLabel: {
                    fontSize: 13
                }
            },
            // Y 轴
            yAxis: {
                name: '数量(台)',
                nameTextStyle: {
                    fontSize: 14
                }
            },
            // 坐标系网格设置
            grid: {
                top: 120,
                bottom: 50
            },
            // 数据
            series: [
                {
                    name: '总数(台)',
                    type: 'bar',
                    stack: 'one',
                    emphasis: emphasisStyle,
                    data: data1,
                    label: {
                        show: true,
                        position: 'inside',
                        fontSize: 18

                    }
                },
                {
                    name: '已用(台)',
                    type: 'bar',
                    stack: 'two',
                    emphasis: emphasisStyle,
                    data: data2,
                    label: {
                        show: true,
                        position: 'inside',
                        fontSize: 18
                    }
                },
                {
                    name: '空闲(台)',
                    type: 'bar',
                    stack: 'two',
                    emphasis: emphasisStyle,
                    data: data3,
                    label: {
                        show: true,
                        position: 'inside',
                        fontSize: 18
                    }
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        deviceStatsCharts.setOption(option);

    });
</script>